<template>
    <div class="base-container" style="height: 100%">
        <el-button
            type="primary"
            size="mini"
            @click="$router.push({ path: '/'})"
            style="position: absolute;top:21px;right: 21px;z-index: 999"
        >
            总览
            <i class="el-icon-arrow-right el-icon-right"></i>
        </el-button>
        <foreign-out-trade-ranking-goods ref="foreignOutTrade"/>
        <china-map id="china-map" ref="chinaMap" @converseAnother="converseAnother"/>
        <half-year-check-release-conta ref="halfYearCheckReleaseConta"/>
        <foreign-in-trade-ranking-goods ref="foreignInTrade"/>
        <world-map id="out-world-map" :data-height="height" :data-width="width" v-show="ioFlag==='O'" ref="outWorldMap"/>
        <world-map id="in-world-map" :data-height="height" :data-width="width" v-show="ioFlag==='I'" ref="inWorldMap"/>
        <port-route-ranking ref="portRouteRanking"/>
    </div>
</template>

<script>
import ForeignInTradeRankingGoods from "../../components/portEconomy/Histogram";
import ForeignOutTradeRankingGoods from "../../components/portEconomy/Histogram";
import HalfYearCheckReleaseConta from "../../components/portEconomy/DoubleLineChart";
import FromVesselList from "../../components/portEconomy/VesselList";
import ToVesselList from "../../components/portEconomy/VesselList";
import PortRouteRanking from "../../components/portEconomy/Histogram";
import WorldMap from "../../components/portEconomy/WorldMap";
import ChinaMap from "../../components/portEconomy/ChinaMap";
import http from "../../commons/utils/httpUtil";

export default {
    name: "NanShanPortInfo",
    components: {
        ChinaMap,
        WorldMap,
        PortRouteRanking,
        ToVesselList,
        FromVesselList,
        HalfYearCheckReleaseConta,
        ForeignInTradeRankingGoods,
        ForeignOutTradeRankingGoods,
    },
    data() {
        return {
            ioFlag: 'O',
            height: document.getElementById('app').clientHeight * 0.5,
            width: document.getElementById('app').clientWidth * 0.51
        }
    },
    created() {
        // 初始化国内港口集装箱吞吐量排名
        this.initHalfYearCheckReleaseContaOption();

    },
    mounted() {
        // 初始化港口航线排名
        this.initPortRouteRankingOption();
        // 初始化当年每月南山港占比
        // this.initCurrentYearContaOption();
        // 初始化南山港外贸货物港口排名
        this.initForeignOutTradeRankingGoodsOption();
        // 初始化南山港外贸货物港口排名
        this.initForeignInTradeRankingGoodsOption();
    },
    methods: {
        /**
         * 初始化港口航线数量排名
         */
        initPortRouteRankingOption() {
            let _this = this;
            http.get('/large/queryPortRouteRanking').then((res) => {
                if (res && res.data && res.data.length > 0) {
                    let dataList = res.data;
                    let portRouteRankingOption = {
                        titleText: '班轮航线',
                        legendData: ['航线数量'],
                        xAxisData: dataList.map(item => {return item.portNameCn}),
                        yAxisName: '数量(条)',
                        yAxisData: dataList.map(item => {return item.portNameCn}),
                        seriesData: [
                            dataList.map(item => {return item.routeNum})
                        ]
                    }

                    _this.$refs.portRouteRanking.initSeries(portRouteRankingOption);
                }
            });
        },

        /**
         * 反转
         */
        converseAnother(type) {
            this.ioFlag = type === 1 ? 'O' : 'I';
        },

        /**
         * 获取渐变色
         */
        getLinearGradient(left, top, right, bottom, primary, normal) {
            return {
                normal: {
                    color: new this.$echarts.graphic.LinearGradient(left, top, right, bottom, [{
                        offset: 0,
                        color: normal
                    }, {
                        offset: 1,
                        color: primary
                    }])
                }
            }
        },

        /**
         * 初始化世界港口货物吞吐量排名
         */
        initForeignInTradeRankingGoodsOption() {
            let _this = this;
            http.get('/large/queryFreGoodsInPortRanking/2020/20').then((res) => {
                if (res && res.data && res.data.records.length > 0) {
                    let worldMapData = res.data.records;
                    // 世界地图
                    let worldMapOption = {
                        titleText: '南山港外贸进口货物来源',
                        groupArray: [{
                            target: '南山',
                            points: res.data.records.map(item => {
                                return {portCode: item.portCode, portName: item.portNameCn}
                            }),
                            pointsValue: worldMapData.map(item => item.goodsThr.toFixed(2)),
                            style: 'from'
                        }],
                    }
                    _this.$refs.inWorldMap.initOption(worldMapOption);

                    // 进口排名
                    let dataList = worldMapData.filter((item, index) => index < 7);
                    let foreignInTradeRankingGoodsOption = {
                        titleText: '南山港外贸货物进口港排名',
                        subTitleText: '数据不含国际中转',
                        legendData: ['2020年吞吐量'],
                        xAxisData: dataList.map(item => item.portNameCn),
                        yAxisName: '吞吐量(万吨)',
                        seriesData: [
                            dataList.map(item => item.goodsThr),
                        ]
                    }

                    _this.$refs.foreignInTrade.initSeries(foreignInTradeRankingGoodsOption);
                }
            });
        },

        /**
         * 初始化世界港口货物吞吐量排名
         */
        initForeignOutTradeRankingGoodsOption() {
            let _this = this;
            http.get('/large/queryFreGoodsOutPortRanking/2020/20').then((res) => {
                if (res && res.data && res.data.records.length > 0) {
                    let worldMapData = res.data.records;
                    // 世界地图
                    let worldMapOption = {
                        titleText: '南山港外贸出口货物流向',
                        groupArray: [{
                            target: '南山',
                            points: worldMapData.map(item => {
                                return {portCode: item.portCode, portName: item.portNameCn}
                            }),
                            pointsValue: worldMapData.map(item => item.goodsThr.toFixed(2)),
                            style: 'to'
                        }],
                    }
                    _this.$refs.outWorldMap.initOption(worldMapOption);

                    // 广东地图
                    let chinaMapOption = {
                        titleText: '南山港外贸出口货物来源',
                        convergenceGroupArray: [
                            {
                                target: '南山',
                                points: ['黄埔', '惠州', '东莞', '中山', '佛山', '湖南', '湖北', '广西', '云南', '贵州', '香港', '澳门'],
                            }
                        ],
                        divergenceGroupArray: [
                            {
                                target: '南山',
                                points: ['黄埔', '惠州', '东莞', '中山', '佛山', '湖南', '湖北', '广西', '云南', '贵州', '香港', '澳门'],
                            }
                        ],
                    }
                    _this.$refs.chinaMap.initOption(chinaMapOption);

                    // 出口排名
                    let dataList = worldMapData.filter((item, index) => index < 7);
                    let foreignOutTradeRankingGoodsOption = {
                        titleText: '南山港外贸货物出口港排名',
                        subTitleText: '数据不含国际中转',
                        legendData: ['2020年吞吐量'],
                        xAxisData: dataList.map(item => item.portNameCn),
                        yAxisName: '吞吐量(万吨)',
                        seriesData: [
                            dataList.map(item => item.goodsThr),
                        ]
                    }

                    _this.$refs.foreignOutTrade.initSeries(foreignOutTradeRankingGoodsOption);
                }
            });
        },

        /**
         * 初始化国内港口集装箱吞吐量排名
         */
        initHalfYearCheckReleaseContaOption() {
             let _this = this;
            http.get('/large/queryCheckReleaseMonthRecord/2021').then((res) => {
                if (res && res.data && res.data.length > 0) {
                    // 进口排名
                    let halfYearCheckReleaseContaOption = {
                        titleText: '南山港查验放行集装箱吞吐量',
                        legendData: ['放行', '查验'],
                        xAxisData: res.data.map(item => item.month+'月'),
                        yAxisName: ['数量(TEU)', '数量(TEU)'],
                        yAxisIndex: [0, 1],
                        seriesType: ['line', 'line'],
                        seriesData: [
                            res.data.map(item => item.releaseNum),
                            res.data.map(item => item.checkNum),
                        ]
                    }

                    _this.$refs.halfYearCheckReleaseConta.initSeries(halfYearCheckReleaseContaOption);
                }
            });
        },

        // /**
        //  * 初始化国内港口货物吞吐量排名
        //  */
        // initCurrentYearContaOption() {
        //     let _this = this;
        //     let currentYearContaOption = {
        //         titleText: '深圳南山港当年月集装箱吞吐量占比',
        //         legendData: ['南山港', '深圳港', '南山港占比'],
        //         xAxisData: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月'],
        //         yAxisName: ['吞吐量(万TEU)', '南山港占比'],
        //         seriesType: ['bar', 'bar', 'line'],
        //         yAxisIndex: [0, 0, 1],
        //         itemStyle: [
        //             _this.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
        //             _this.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
        //             {normal: {color: '#f06162'}}
        //         ],
        //         seriesData: [
        //             [112.8451, 77.7775, 98.3028, 103.8612, 97.0263, 102.1888, 109.7533, 121.1796],
        //             [271.8451, 210.7775, 241.3028, 236.8612, 234.0263, 185.1888, 238.7533, 254.1796],
        //         ]
        //     }
        //
        //     let temp = [];
        //     let seriesData = currentYearContaOption.seriesData;
        //     for (let i = 0; i < seriesData[0].length; i++) {
        //         temp.push(((seriesData[0][i]/seriesData[1][i])*100).toFixed(2))
        //     }
        //     seriesData.push(temp);
        //     _this.$refs.currentYearConta.initSeries(currentYearContaOption);
        // },
    },
}
</script>

<style scoped>
.base-container {
    background-color: rgba(0, 0, 0, 0);
}

.base-container > div {
    width: 23.5%;
    height: 48%;
    padding: 0.5%
}

.base-container > div.vessel-list {
    width: 24.5%;
    height: 46%;
    padding: 0.5%;
    overflow: hidden;
    position: relative;
}

.from-vessel-list:after {
    height: 100%;
    width: 3px;
    content: "";
    position: absolute;
    top: 3%;
    right: -0.5%;
    background-color: white;
}

#out-world-map, #in-world-map, #china-map {
    width: 51%;
    height: 50%;
    padding: 0;
}

.base-container {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
}
</style>
<style>
/*.echarts-map > div:first-child {*/
/*    height: 100% !important;*/
/*    width: 100% !important;*/
/*}*/
/*.echarts-map > div:first-child > canvas {*/
/*    height: 100% !important;*/
/*    width: 100% !important;*/
/*}*/
</style>